<template>
  <div class="more-container">
    <!-- 顶部表单区域 -->
    <div class="inner-content">
      <el-row>
        <el-col :span="4" style="margin-right: 15px">
          <el-input
            v-model="topForm.searchword"
            clearable
            placeholder="搜索名称/联系人/联系电话/地址"
          ></el-input>
        </el-col>
        <el-col :span="4" style="margin-right: 15px">
          <el-select
            v-model="topForm.school"
            placeholder="关联校区"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in schoolOptions"
              :key="index"
              :label="item.title"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4" style="margin-right: 15px">
          <el-select
            v-model="topForm.online"
            placeholder="线上展示"
            @change="changeState"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>

      <commonline
        :newText="'报名点'"
        @addList="additem"
        @searchlist="searchlist"
        @resetform="resetform"
        @refreshData='refreshData'
        :importname="'报名点'"
        :isshowImport="checkPermission(['admin','normal'])"
        :isshowAdd="checkPermission(['admin','normal'])"
        :importUrl='"enroll/import"'
        :dUrl='"https://oss.juchehulian.com/Excel/%E6%8A%A5%E5%90%8D%E7%82%B9%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls"'
      ></commonline>
      
      <!-- 新增报名点弹窗 -->
      <assignsdialog
        :formType="formtype"
        @confirm="confirm"
        :isshowDialog="isshowadd"
        :dialogTitle="dialogTitle"
        @closedialog="closedialog"
      ></assignsdialog>

      <!-- 表单表格 -->
      <assignstable
        @deleteitem="deleteitem"
        @changepageTotal="changepageTotal"
        @changepage="changepage"
        @openedit="openedit"
        :tabData="tabList"
        v-if="isDataSuccess"
        @switchBack='switchBack'
      ></assignstable>
    </div>
  </div>
</template>

<script>
//引入通用行
import commonline from '@/components/commonline/commonline'
import assignsdialog from './component/assignsdialog'
import assignstable from './component/assignstable'
//api
import { getListenroll, deleteItem } from '@/api/enroll'
import {getSessionStorage} from '@/utils/accessToken'
//按钮权限验证
import checkPermission from "@/utils/permission";
export default {
  data() {
    return {
       //数据是否请求成功
      isDataSuccess:false,
      dialogTitle: '新增报名点',
      //新增还是编辑
      formtype: 0,
      //选中的那个tab
      activetab: 2,
      //是否显示弹窗
      isshowadd: false,
      //表格数据
      tabList: {},
      //top表单
      topForm: {
        searchword: '',
        school: '',
        online: '',
      },
      schoolOptions: [],
      //选项
      options: [
        {
          value: '1',
          label: '是',
        },
        {
          value: '0',
          label: '否',
        },
      ],
      //翻页总数
      pageTotal: 10,
      //第几页
      page: 1,
    }
  },
  methods: {
    //按钮权限验证
    checkPermission,
    //列表切换switch 触发的事件
    switchBack(){
      this.getListenrollData(this.page, this.pageTotal)
    },
     //上传成功刷新数据
    refreshData(){
        this.getListenrollData(this.page, this.pageTotal)
    },
    //总数翻页
    changepageTotal(val) {
      this.pageTotal = val
      this.getListenrollData(this.page, this.pageTotal)
    },
    //翻页
    changepage(val) {
      this.page = val
      this.getListenrollData(this.page, this.pageTotal)
    },
    //刪除
    async deleteitem(id) {
      //询问客户是否删除
      this.$confirm('您确认要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let data = await deleteItem({ id: id })
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
            //刷新列表
            this.getListenrollData()
          }
        })
        .catch(() => {})
    },
    //選擇搜索查詢是否線上展示
    changeState(val) {

    },
    //获取列表数据
    async getListenrollData(page = 1, rows = 10) {
      let params = {
        page,
        rows,
      }
      if (this.topForm.searchword) {
        params.keyword = this.topForm.searchword
      }
      if (this.topForm.school) {
        params.school_id = this.topForm.school
      }
      if (this.topForm.online) {
        params.state = this.topForm.online
      }
      let data = await getListenroll(params)
      this.tabList = data.data
      //列表数据请求成功
      this.isDataSuccess = true
    },
    //打开编辑弹窗
    openedit(val) {
      console.log(val)
      this.dialogTitle = '编辑报名点'
      this.$bus.emit('editreadform', val)
      this.formtype = val.type
      this.isshowadd = true
    },
    //切换tabbox
    changetab(id) {
      this.activetab = id
    },
    additem() {
      this.dialogTitle = '新增报名点'
      this.formType = 0
      this.isshowadd = true
    },
    //查询搜索
    searchlist() {
      this.$message({
        type: 'success',
        message: '查询成功!',
      })
      this.getListenrollData(this.page, this.pageTotal)
    },
    //重置
    resetform() {
      //清空数据
      this.topForm.searchword = ''
      this.topForm.school = ''
      this.topForm.online = ''

      this.pageTotal = 10
      this.page = 1
      this.$message({
        type: 'success',
        message: '已重置!',
      })
      //刷新列表
      this.getListenrollData(this.page, this.pageTotal)
    },
    //添加和编辑成功
    confirm() {
      this.formtype = 0
      this.isshowadd = false
      //刷新列表
      this.getListenrollData()
    },
    closedialog() {
      this.formtype = 0
      this.isshowadd = false
    },
  },
  components: {
    commonline,
    assignsdialog,
    assignstable
  },
  mounted() {
    //获取列表数据
    this.getListenrollData()
    //学校选项
    this.schoolOptions = getSessionStorage('Optionsall')['school']
  },
}
</script>

<style scoped lang='scss'>

</style>
